<template>
  <div>
    <!--题库录入-->
    <el-form label-width="80px" :model="formData" ref="formData" class="formcatorll">
      <el-form-item label="科目" prop="subject">
        <el-select v-model="formData.subject" placeholder="请选择">
          <el-option v-for="item in sub" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="章节" prop="chapter">
        <el-select placeholder="请选择出题范围" v-model="formData.chapter">
          <el-option label="第一章" value="第一章"></el-option>
          <el-option label="第二章" value="第二章"></el-option>
          <el-option label="第三章" value="第三章"></el-option>
          <!--如果需要更多章节在此添加即可...-->
        </el-select>
      </el-form-item>
      <el-form-item label="题目" prop="title">
        <el-input type="textarea" v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="选项A" prop="A">
        <el-input placeholder="A" v-model="formData.A"></el-input>
      </el-form-item>
      <el-form-item label="选项B" prop="B">
        <el-input placeholder="B" v-model="formData.B"></el-input>
      </el-form-item>
      <el-form-item label="选项C" prop="C">
        <el-input placeholder="C" v-model="formData.C"></el-input>
      </el-form-item>
      <el-form-item label="选项D" prop="D">
        <el-input placeholder="D" v-model="formData.D"></el-input>
      </el-form-item>
      <el-form-item label="答案" prop="answer">
        <el-input v-model="formData.answer"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formData')">立即添加</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      sub: [
        { value: "Html", label: "Html" },
        { value: "Css", label: "Css" },
        { value: "JavaScript", label: "JavaScript" }
      ],
      formData: {
        subject: "", // 科目
        chapter: "", // 章节
        title: "", // 题目
        // 选项
        A: "",
        B: "",
        C: "",
        D: "",
        answer: "" // 答案
      }
    };
  },
  methods: {
    // 提交
    submitForm(formName) {
      // console.log()
      this.axios.post("/api/submitTitle", this.formData).then(res => {});
    },
    // 重置(已完成)
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style  scoped>


/*form表单*/
.formcatorll {
  padding: 20px;
  max-width: 480px;
}
</style>